<template>
	<div>
		<div class="main Mdetail">
			<!-- top -->
			<div class="top flexRow">
				<div class="back" @click="goback"></div>
				<div class="title1">歌单名称</div>
				<div class="empt"></div>
			</div>
			<!-- 歌曲列表 -->
			<div class="Songslist flewCol ">
				<!--  -->
				
				
				
				<router-link tag="div" :to="{path:`/player`,query:{id:item.id,name:item.al.name,imgurl:item.al.picUrl}}" :key="index" v-for="(item,index) in listsongs" class="SongItems  flexRow">
					<div class="left flewCenter flewCol">
						<div class="songsName">{{index+1}}.{{item.name}}</div>
						<div class="singer">{{item.ar[0].name}}</div>
					</div>
					<div class=" right flewCenter flexRow">
						
						<div class="broadcast">
							<img class="label1" referrerpolicy="no-referrer"
								src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskcwqgigzvjlxvbii8fsh87snfpw37zak5ef49875-b5f7-455a-8c34-eaa35e1d4604" />
						</div>
						
						<div class="other">
							<img class="label2" referrerpolicy="no-referrer"
								src="https://lanhu.oss-cn-beijing.aliyuncs.com/psnwxsj4swjar63xxvurrw80g0smrqjepruf0abe9b2-3827-420c-9966-de7dda0ff53b" />
						</div>
					</div>

				</router-link>
				
			</div>
		</div>
	</div>
</template>

<script>
	import Top from '../Top.vue'
	export default {
		components: {
			Top

		},
		name: "ListSongs",
		data() {
			return {
               listsongs:[]
			}
		},
		mounted() {
			//获取歌单歌曲
			this.getplaylistRec()
			console.log(this.$route.query.name)
		},
		created() {

		},
		methods: {
			//获取歌单歌曲
			async getplaylistRec() {
				const {
					data: res
				} = await this.$http.get('/playlist/track/all', {
					params: {
						id: this.$route.query.id,
						limit:8
					}
				})
				if(res.code!==200){
					this.$message.error('获取歌单歌曲失败')
				}else{
					this.listsongs = res.songs
					
				}
				
				
			},
			//返回上一级
			goback() {
				this.$router.go(-1)
			},
		}
	}
</script>

<style>
	.left,.right{
		height: 38px;
	}
	.title1 {
		z-index: 7;
		width: 100%;
		height: 19px;
		margin-top: 0;
		font-size: larger;
		color: white;

	}

	.back {
		z-index: 6;
		width: 9px;
		height: 16px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps9k8csqmnonwsiy03zoyt6p97jz3arhly5910b6a32-dd13-4bd6-930c-c9d95c998b65) 0px -1px no-repeat;

	}

	.empt {
		width: 9px;
		height: 16px;
	}

	.top {
		justify-content: space-between;
		width: 335px;
		margin: 0 20px;
	}

	.broadcast,
	.other {
		margin-right: 5px;
	}

	.songsName {
		font-weight: 600;
		font-size: 15px;
	}

	.singer {
		font-weight: 200;
		font-size: 8px;
		color: #a8a8a8;
	}

	.SongItems {

		z-index: auto;
		width: 342px;
		clear: both;
		height: 35px;
		
		justify-content: space-between;
		margin: 10px auto;
		padding-left: 5px;
	}

	.Mdetail {
		margin-top: 27px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psxs6roftmr6cl39b2kavajb5asdf0v6psbc8d1899-45b9-4359-8d1a-830f06ec610d) 100% no-repeat;
	}

	.Songslist {
		z-index: 9;
		height: 350px;
		background-color: white;
		margin-top: 183px;
		width: 375px;
		justify-content: flex-start;
		padding-top: 50px;
		align-items: center;
		border-radius: 70px;
		overflow-y: scroll;
	}
	.Songslist::-webkit-scrollbar{
		width: 1px;
	}
</style>
